Accessibility

Was ist Accessibility?

Accessibility (Zugänglichkeit) beschreibt das Konzept, Webseiten und digitale Inhalte so zu gestalten, dass sie von möglichst vielen Menschen genutzt werden können. Unabhängig von körperlichen oder kognitiven Einschränkungen, technischen Ressourcen oder situativen Einschränkungen sollte die Webseite verwendet werden können. Ein Beispiel sind farbenblinde Nutzer, die Komplementärfarben nicht unterscheiden können, oder blinde Nutzer, die auf VoiceOver oder Screenreader angewiesen sind, um im Web zu navigieren. Ziel der Accessibility ist es, Barrieren abzubauen, die Menschen daran hindern könnten, auf Informationen, Dienste und Funktionen zuzugreifen, die online bereitgestellt werden.

Da Webtypografie ein zentraler Bestandteil der Kommunikation im Web ist, sollte diese zugänglich und leicht lesbar gestaltet werden. Die Ausahl geeigneter Schriftarten, Größen, Farben und Abstände kann entscheidend dafür sein, ob ein Text erfasst werden kann oder ob er für einige Leser unleserlich bleibt.

Alle zuvor in der Roadmap behandelten Aspekte finden bei der Accessibility ihren Höhepunkt: Ohne optimale Lesbarkeit bleibt der Inhalt für die Nutzer unverständlich und die Webseite verliert an Wert und Funktion.

Vier Prinzipien

Um barrierefreie Webseite zu gewährleisten, sollten Designer bestimmte Richtlinien befolgen. Deshalb wurden die Web Content Accessibility Guidelines (WCAG) entwickelt, die dabei unterstützen, diese Anforderungen zu erfüllen:

Wahrnehmbar: Jeder Nutzer muss in der Lage sein, die Webseite zu erfassen. Dies umfasst nicht nur Text, sondern auch Audio-Clips und Bilder. Blinde oder gehörlose Nutzer können solche Elemente nicht wahrnehmen, wenn keine Alternativen bereitgestellt werden. Beispielsweise sollten Bilder mit textuellen Beschreibungen versehen sein. Zudem sollte der Inhalt von der Struktur getrennt werden. Diese Trennung ermöglicht es, Inhalte auf unterschiedliche Weise zu gestalten, ohne dabei Informationen oder die Struktur zu verlieren.

Bedienbar: Jeder Nutzer sollte in der Lage sein, die Webseite problemlos zu bedienen. Dies gilt insbesondere für Personen, die keine Maus verwenden können. Durch eine vollständige Tastaturnavigation können auch diese Nutzer alle Funktionen der Webseite erreichen. Zudem sollte den Nutzern ausreichend Zeit für Eingaben eingeräumt werden. Es ist außerdem empfehlenswert, Navigationshilfen und Ortsangaben bereitzustellen, um die Benutzerfreundlichkeit weiter zu verbessern.

Verständlich: Die Informationen auf einer Webseite sollten für alle Nutzer klar und verständlich sein. Der Aufbau der Webseite sollte so übersichtlich wie möglich gestaltet werden. Darüber hinaus sollten die Texte in der festgelegten Sprache einfach und leicht nachvollziehbar formuliert sein. Eingabehilfen, wie beispielsweise Platzhaltertexte können dabei unterstützen die Nutzerführung zu erleichtern.

Robust: Um sicherzustellen, dass Nutzer verschiedene Browser und Hilfsprogramme verwenden können, ist es wichtig, auf eine korrekte Syntax im HTML-Code zu achten. Eine fehlerfreie Struktur ermöglicht es beispielsweise Screenreadern, die Elemente präzise zu erkennen und korrekt zu interpretieren.

Barrierefreie Texte

Hier sind einige Tipps zur Gestaltung barrierefreier Texte:
Eine klare Struktur ist entscheidend für barrierefreie Typografie im Web. Der HTML-Code sollte semantisch korrekt aufgebaut sein, da eine präzise Syntax die Hierarchie des Textes für Screenreader und andere Hilfsprogramme verbessert. Zudem können ARIA-Landmarks eingesetzt werden, um gezielte Strukturen deutlich zu kennzeichnen. Ein Beispiel hierfür ist das aria-live-Attribut, das Screenreadern ermöglicht, dynamisch veränderten Text sofort wahrzunehmen und den Nutzern in Echtzeit mitzuteilen.

Verwende einfache und klare Sprache und vermeide wenn möglich unnötige komplexe Sondersprache, welche für Nutzer mit kognitiver Einschränkung oder geringer Lesekompetenz das Verständnis verschlechtern könnte. Bei Texten in mehreren Sprachen sollte das lang Attribut verwendet werden, damit Screenreader die Sprache korrekt interpretieren können.

Usability Guidelines sind äußerst hilfreich bei der Gestaltung verschiedener Texte. Sie bestehen aus Prinzipien und Empfehlungen, die darauf abzielen, die Benutzerfreundlichkeit und Zugänglichkeit zu verbessern. Beispiele hierfür sind benutzerzentrierte Gestaltung, Konsistenz im Design und Klarheit. Es ist wichtig, in der Schriftstruktur sowie in der Gestaltung und Anordnung der Texte konsistent zu sein. Dies fördert die Orientierung und schafft ein vertrautes Nutzungserlebnis über die gesamte Webseite hinweg.

/* Ein Beispiel für schlechte HTML Struktur */
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Typografie-Beispiel</title>
</head>
<body>
    <div class="title">Willkommen</div>
    <div>Einführung zur Typografie</div>
    <span>Dieser Text ist der Hauptinhalt und erläutert die Bedeutung der Typografie.</span>
    <p>Weitere Informationen</p>
    <h6>Typografie spielt eine wichtige Rolle bei der Lesbarkeit und sollte daher sorgfältig gestaltet sein.<h6>
</body>
</html>
                        

/* Ein Beispiel für gute HTML Struktur */
/* Hier mit ARIA-Rollen */
<!DOCTYPE html>
<html lang="de">
<head>
    <title>Typografie-Beispiel</title>
</head>
<body>
    <header role="banner">
        <h1>Willkommen</h1>
    </header>

    <main role="main">
        <section aria-labelledby="einführung">
            <h2 id="einführung">Einführung zur Typografie</h2>
            <p>Dieser Text ist der Hauptinhalt und erläutert die Bedeutung der Typografie.</p>
        </section>

        <section aria-labelledby="weitere-infos">
            <h2 id="weitere-infos">Weitere Informationen</h2>
            <p>Typografie spielt eine wichtige Rolle bei der Lesbarkeit und sollte daher sorgfältig gestaltet sein.</p>
        </section>
    </main>
</body>
</html>
                        

Darstellung

Viele Aspekte wie Textgrößen, Skalierbarkeit und Zeilenhöhe wurden bereits im Rahmen von Font Sizing, Responsive Typography und CSS behandelt. Alle zuvor genannten Best Practices und Tipps wurden mit dem Fokus auf Accessibility entwickelt. Ein weiterer wichtiger Punkt ist der Farbkontrast, der die Lesbarkeit erheblich beeinflussen kann. In den Web Content Accessibility Guidelines gibt es auch hierzu Vorgaben: Der Kontrast zwischen Text und Hintergrund sollte mindestens 4,5:1 betragen, um die Lesbarkeit für sehbeeinträchtigte Nutzer zu gewährleisten.

Durch den Einsatz von Whitespace (Leerraum) können Textblöcke und Abschnitte visuell klar strukturiert werden. Dies lässt sich mithilfe der Padding- und Margin-Attribute in CSS oder durch das allgemeine Design erreichen. Dadurch wird visuelle Überlastung reduziert und die Informationsverarbeitung für die Nutzer verbessert.

Um das Design zu testen, kann man das Tool Lighthouse verwenden. Lighthouse ist ein automatisiertes Open-Source-Tool, das von Google entwickelt wurde, um die Qualität von Webseiten zu analysieren. Es bewertet verschiedene Elemente einer Webseite, darunter Performance, Accessibility, Best Practices und SEO. Nach der Analyse erhält man einen Punkteanzahl von 0 bis 100 sowie verschiedene Tipps und Hinweise zu Problemen, die bei der Gestaltung hilfreich sein können.

Accessibility auf dieser Webseite?

Barrierefreiheit ist ein zentraler Aspekt dieser Webseite, die als Informationsquelle dienen soll und daher von Nutzern mit unterschiedlichen Einschränkungen besucht werden könnte. Um sicherzustellen, dass alle Inhalte zugänglich sind, wurden die vier grundlegenden Prinzipien der Barrierefreiheit im Designprozess berücksichtigt:

Da der Großteil der Webseite aus Texten besteht, beschränkten sich die Anpassungen bei den Bildern auf alternative Bildbeschreibungen. Der Inhalt wurde strukturiert, indem verschiedene Elemente in Kategorien wie Fließtexte sowie primäre und sekundäre Überschriften eingeteilt wurden. Diese klare Trennung erleichterte die Gestaltung der ganzen Webseite.

Die Webseite ist im Stil eines Blogs aufgebaut, wobei es keine komplexen Funktionen gibt. So kann der Browser problemlos eine vollständige Tastaturnavigation bereitstellen. Die korrekte und konsistente HTML-Syntax ermöglicht zudem, dass Screenreader alle Inhalte einwandfrei interpretieren können. ARIA-Rollen wurden bewusst nicht verwendet, da die Webseite ausschließlich auf semantisch korrektem HTML basiert, welches bereits alle relevanten Informationen für Screenreader bereitstellt.

Obwohl die Seite für eine spezifische Zielgruppe entwickelt wurde und Fachbegriffe daher nicht komplett vermieden werden können, wurde versucht, durch einfache Formulierungen eine möglichst breite Lesbarkeit zu gewährleisten, auch für Nutzer mit kognitiven Einschränkungen. Das konsistente Design der einzelnen Seiten sorgt zusätzlich für eine gute Orientierung, da jede Seite einem ähnlichen Layout folgt.

Zum Abschluss des Designprozesses wurde das Lighthouse-Tool genutzt, um potenzielle Barrieren wie Farbkontraste zu identifizieren und zu beheben. Probleme im Design wurden iterativ verbessert, beispielsweise bei allen Texten die mit der Variablen --color-catch-text definiert wurden. Der ursprüngliche Kontrast war hier unzureichend, sodass die Farbe angepasst wurde, um einen Kontrastwert von 4,5:1 zu erreichen.

/* Alle verwendeten Farben der Webseite */
:root{
    /* colors */
        --color-primary-title: rgb(0, 17, 34);
        --color-catch-title: rgb(51, 51, 51);
        --color-catch-text: rgb(102, 102, 102);
        --color-info-text: rgb(49 57 66);

        --color-white: white;
        --color-black: black;

        --color-primary-background: var(--color-white);
        --color-secondary-background: #f7f7f7;
        --color-catch-background: rgb(23, 24, 28);
        --color-navbar-background: rgb(23, 24, 28);
        --color-footer-background: rgb(34, 34, 34);

        --color-button: rgb(34, 34, 34);
}
                        

:root{
    /* colors for aspect */
    --text: #020a15;
    --background: #f9fcfe;
    --primary-blue: #6bafff;  
    --secondary: #ffa49f;
    --accent-red:  #ff6b6b;  
    --accent-light: #ECF0F2;
    --accent: #f26172;
    --primary: #4690f0;

    /* colors for cards*/
    --purple: #F1EBFF;
    --red: #ffebf2;
    --blue: #ebefff;
    --green: #EDF9F2;
}